;(function ($) {
    var Carousel = function(poster){
        var self = this

        this.poster = poster
        this.posterItemMain = poster.find("ul.poster-list")
        this.nextBtn = poster.find("div.poster-next-btn")
        this.prevBtn = poster.find("div.poster-prev-btn")
        
        this.posterItems = poster.find("li.poster-item")
        this.posterFirstItem = this.posterItemMain.find("li").first()
        this.posterLastItem = this.posterItemMain.find("li").last()
        this.rotateFlag = true

        //默认配置参数
        this.setting = {
            "width":1000,  //控件宽度
            "height":270,  //控件高度
            "posterWidth":640, //第一帧宽度
            "posterHeight":270, //第一帧高度
            "scale":0.9,
            "speed":500,
            "autoPlay":true,
            "delay":3000,
            "verticalAlign":"middle"//top,middle,bottom
        }    
    
        $.extend(this.setting,this.getSetting())

        //设置配置参数值
        this.setSettingValue()
        //设置两边下层图片
        this.setPosterPos()

        this.nextBtn.click(function(){
            if(self.rotateFlag){
                self.rotateFlag=false
                self.carouseRotate("right")
            }
        })

        this.prevBtn.click(function(){
            if(self.rotateFlag){
                self.rotateFlag=false
                self.carouseRotate("left")
            }
        })

        if(this.setting.autoPlay){

            this.autoPlay()   
            this.poster.hover(function(){
                window.clearInterval(self.timer)
            },function(){
                self.autoPlay()
            })         
        }
    }
    Carousel.prototype = {
        //自动播放
        autoPlay:function(){
            var self = this
            this.timer=window.setInterval(function(){
                self.nextBtn.click()
            },this.setting.delay)
        },
        //旋转方法
        carouseRotate:function(dir){
            var _this_ = this
            var zIndexArr = []

            if(dir==="right"){
                
                this.posterItems.each(function(){

                    var self = $(this),
                    prev = self.prev().get(0)?self.prev():_this_.posterLastItem,
                    width = prev.width(),
                    height = prev.height(),
                    zIndex = prev.css("zIndex"),
                    opacity = prev.css("opacity"),
                    left = prev.css("left"),
                    top = prev.css("top")

                    self.animate(
                        {
                            zIndex:zIndex
                        },
                        1,
                        function(){self.animate({
                            width:width,
                            height:height,
                            opacity:opacity,
                            left:left,
                            top:top
                        },_this_.setting.speed,function(){
                            _this_.rotateFlag=true
                        })
                    })

                })


            }else if(dir==="left"){

                this.posterItems.each(function(){

                    var self = $(this),
                    next = self.next().get(0)?self.next():_this_.posterFirstItem,
                    width = next.width(),
                    height = next.height(),
                    zIndex = next.css("zIndex"),
                    opacity = next.css("opacity"),
                    left = next.css("left"),
                    top = next.css("top")

                    self.animate(
                        {
                            zIndex:zIndex
                        },
                        1,
                        function(){self.animate({
                            width:width,
                            height:height,
                            opacity:opacity,
                            left:left,
                            top:top
                        },_this_.setting.speed,function(){
                            _this_.rotateFlag=true
                        })
                    })
                })
            }
        },
        //设置剩余的帧位置关系
        setPosterPos:function(){
            var self = this
            var even = false;
            if(this.posterItems.size()%2==0){
                even = true;
            }
            var sliceItems = this.posterItems.slice(1),
            sliceSize = sliceItems.size()/2,
            rightSlice = sliceItems.slice(0,sliceSize),
            level = Math.floor(this.posterItems.size()/2),
            leftSlice = sliceItems.slice(sliceSize)
            var rw = this.setting.posterWidth,
            rh = this.setting.posterHeight,
            gapLeft = ((this.setting.width-this.setting.posterWidth)/2)/level,
            gapRight = even?((this.setting.width-this.setting.posterWidth)/2)/(level-1):gapLeft

            var firstLeft = (this.setting.width-this.setting.posterWidth)/2
            var fixOffsetLeft = firstLeft+rw

            //设置右边帧的位置关系和宽度高度
            rightSlice.each(function(i){
                level--
                rw*=self.setting.scale
                rh*=self.setting.scale

                $(this).css({
                    zIndex:level,
                    width:rw,
                    height:rh,
                    left:fixOffsetLeft+(++i)*gapRight-rw,
                    top:self.setVertucalAlign(rh),
                    opacity:1/i                    
                })



            })

            //设置左边帧的位置关系和宽度高度
            var lw = even?rw*self.setting.scale:rw,
            lh = even?rh*self.setting.scale:rh
            leftSlice.each(function(i){
                if(i>0){
                    lw/=self.setting.scale
                    lh/=self.setting.scale
                }
                

                $(this).css({
                    zIndex:i,
                    width:lw,
                    height:lh,
                    left:gapLeft*i,
                    top:self.setVertucalAlign(lh),
                    opacity:1/(leftSlice.size()-i++)
                    
                })
            })
        },
        //设置垂直排列对其关系
        setVertucalAlign:function(height){
            var verticalType = this.setting.verticalAlign
            if(verticalType==="middle"){
                return (this.setting.height-height)/2
            }else if(verticalType==="top"){
                return 0
            }else if(verticalType==="bottom"){
                return (this.setting.height-height)
            }else{
                return (this.setting.height-height)/2
            }
        },
        //设置配置参数值去控制基本的宽度高度
        setSettingValue:function(){
            this.poster.css({
                width:this.setting.width,
                height:this.setting.height
            })
            this.posterItemMain.css({
                width:this.setting.posterWidth,
                height:this.setting.posterHeight
            })
            //计算上下切换按钮的宽度
            var w = (this.setting.width-this.setting.posterWidth)/2
            this.nextBtn.css({
                width:w,
                height:this.setting.height,
                zIndex:Math.ceil(this.posterItems.size()/2)
            })
            this.prevBtn.css({
                width:w,
                height:this.setting.height,
                zIndex:Math.ceil(this.posterItems.size()/2)
            })
            this.posterFirstItem.css({
                width:this.setting.posterWidth,
                height:this.setting.posterHeight,
                left:w,
                zIndex:Math.floor(this.posterItems.size()/2)
            })
        },

        //获取人工配置参数
        getSetting:function(){
            var setting = this.poster.attr("data-setting")
            if(setting){
                return $.parseJSON(setting)
            }else{
                return {}
            }
        }

    }
    Carousel.init = function(posters){
         var _this_ =  this
         posters.each(function(){
             new _this_($(this))    
         })
    }
    window["Carousel"] = Carousel
})(jQuery)